﻿@page "/MessageService"

<PageTitle>@App.PageTitle("MessageService")</PageTitle>

<h1>MessageService</h1>

<p>
    The MessageService is a service that can be used to show MessageBars and Notifications (in a Notification Center as shown here in the demo
    site). It needs to be injected into a page or component before any of its methods can be called.
</p>
<p>
    The MessageService is automatically registered in the DI provider with the <code>.AddFluentUIComponents()</code> method call.
</p>

<h2>MessageBar provider</h2>
<p>
    Messages are rendered by the <code>&lt;FluentMessageBarProvider /&gt;</code>. This component needs to be added to the layout of your application/site.
    For a message bar that needs to be shown at the top of the screen, you typically do this in the <code>MainLayout.razor</code> file at the location in
    the HTML structure where you want the message bars to appear  of the <code>&lt;main&gt;</code> section like this:
</p>
<CodeSnippet Language="razor">
    @(
@"<main>
    <nav>
        <!-- -->
    </nav>
    <div class=""content"">
        <article id=""article"">
            <FluentMessageBarProvider Section=""MESSAGES_TOP""/>
            @Body
        </article>
    </div>
</main>"
    )
</CodeSnippet>

<blockquote>
    <p><strong>IMPORTANT!!</strong></p>
    <p>
        For the <code>&lt;FluentMessageBarProvider/&gt;</code> to work porperly, it needs interactivity! If you are using "per page" interactivity or ASP.NET Core 8
        or above with <strong>Server Side Rendering</strong> , make sure to add a <code>@@rendermode</code> to
        either the provider itself of the component the provider is placed in.
    </p>
</blockquote>

<p>
    It is also possible to have message bars appear in a dialog or card. In that case you need to add the <code>&lt;FluentMessageBarProvider /&gt;</code>
    component to the specification the dialog or card using the <code>Section</code> parameter as an identification.<br />
    You can then target a specific message bar by specifying the <code>Section</code> parameter in the <code>MessageService.ShowMessageBar()</code>/
    <code>MessageService.ShowMessageBarAsync()</code> methods.
</p>

<p>
    See the <a href="/MessageBar">MessageBar</a> page for examples on how to use the messages and FluentMessageBar component.
</p>

<ApiDocumentation Component="typeof(MessageService)" />

<ApiDocumentation Component="typeof(FluentMessageBarProvider)" />

<ApiDocumentation Component="typeof(FluentMessageBar)" />

<ApiDocumentation Component="typeof(Message)" />
